
import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import *as CustomIcons from './CustomIcons'; // 确保导入了所有自定义图标

// 1. 提取CustomIcons的合法键名类型（如 "IconHome" | "IconUser"）
type ValidIconName = keyof typeof CustomIcons;

// 2. 定义图标组件的类型（约束为React函数组件）
type IconComponentType = React.FC<{ style?: React.CSSProperties }>;
interface CustomIconProps{
    handleClick:(iconName:string)=>void;
}
const CustomIconSelector:React.FC<CustomIconProps>  = (props) => {


    const handleSelect = (iconName: string) => {
        props.handleClick(iconName)
        console.log("iconName", iconName)
    };

    const renderIcons = () => {
        // 将合法键名转为数组（确保遍历的是CustomIcons中存在的键）
        const validIconNames = Object.keys(CustomIcons) as ValidIconName[];
        return validIconNames.map((iconName) => {
            const IconComponent = CustomIcons[iconName] as IconComponentType;;
            return (
                <div
                    key={iconName}
                    className=' inline-block text-center cursor-pointer p-2 w-15 '
                    onClick={() => handleSelect(iconName)}
                >
                    <div className=' flex  flex-col items-center select-none '>
                        <IconComponent style={{ fontSize: '24px', width: '15px', height: '15px' }} />
                        <div >{iconName}</div>
                    </div>
                </div>
            );
        });
    };

    return (
        <div className='w-100 h-100 overflow-y-auto'>
           <div><Button onClick={()=>handleSelect("#")} type="primary">无图标</Button></div>
            {renderIcons()}

        </div>
    );
};

export default CustomIconSelector;

